<template>
  <div class="links">
    <span>用router-link导航</span>
    <span>
      <!-- 使用 RouterLink 组件渲染导航链接 -->
      <router-link to="/">Home</router-link>
    </span>
    <span>
      <router-link to="/about">About</router-link>
    </span>
    <span>
      <router-link to="/user/1234">张三丰</router-link>
    </span>
    <span>
      <router-link to="/user/4321">郭襄</router-link>
    </span>
    <span>
      <router-link to="/user/1122">杨过</router-link>
    </span>
    <span>
      <router-link to="/list">话题列表</router-link>
    </span>
    <span>
      <router-link to="/receiver?id=1&name=sanfeng">查询字符串</router-link>
    </span>
    <span>
      <router-link :to="{ path: '/receiver' , query: { id: 2 , name: 'junbao'} }">查询字符串</router-link>
    </span>
    <span>
      <router-link :to="{ name: 'receiver' , query: { id: 3 , name: 'guoxiang'} }">查询字符串</router-link>
    </span>
    <span>
      <button @click="open">查询字符串</button>
    </span>
    <span>
      <!-- <router-link to="/receiver/1/sanfeng">路径参数</router-link> -->
      <router-link :to="{ name: 'receiver' , params: { args: [ 4 , '殷素素' ] } }">路径参数</router-link>
    </span>
  </div>
</template>

<script>
export default {
    name: 'NavigationBar',
    methods: {
      open(){
        // 在 this.$router.push 参数中使用字符串
        // this.$router.push( '/receiver?id=4&name=cuishan' );
        // 在参数中使用对象
        // this.$router.push({ path: '/receiver' , query: { id: 2 , name: 'junbao'} });
        this.$router.push({ name: 'receiver' , query: { id: 2 , name: 'junbao'} });
      }
    }
}
</script>

<style scoped>
.links{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  line-height: 10vh;
}
.links>span{
  margin-right: 10px;
}
</style>